第一天：AI 英語交流伙伴 / SvelteKit 和 Kitbook

2023 iThome 鐵人賽

DAY 1

AI & Data

打造一個AI語言交流伙伴。它能幫助你練習英語會話並記住過去的對話。系列第 1 篇

15th鐵人賽

jacob_b

2023-09-16 21:20:43

153 瀏覽

分享至

上個兩年我一直在學習中文，因此我構建了一個 web app 工具來幫助我學習中文。它會記錄我知道的的單詞和字。我可以找到真的生活的內容（網站、文章、YouTube 等），並將其帶入我的工具中。我工具把每個不知道的字，給我提醒。「這個字有這個意思：」。對我來說，這個學語言的方法非常容易。我真的很喜歡它，目前正在努力擴展它的能力，包括語言交換功能。我還希望有機會練習中文寫作，因此我參與這個鐵人賽。我會分享一系列文章，教您如何構建一個相反方向的工具：幫助您學習英語。

studying

當然，關於語言交換，沒有工具可以取代真的人。跟真的人聊天非常價值和樂趣，但當你附近沒有朋友時，有語言交換的工具的話非常方便。如果你利用這個方法，很快就學很多。最近 AI 技術進步之前，語言交換還不是計算機可以提供的功能。但現在可以，所以我們應該把握這個新的技術。

許多人已經製作了許多關於如何理解 AI 並在日常應用中使用它的優秀教程。所以我不會花太多時間來幫助你理解 AI。你已經可以在其他地方找到信息。我在這些課程中的重點是幫助你了解如何以簡單的方式實現實用且強大的用例，而不會被複雜性壓倒。由於這個領域非常新，幾乎沒有示例 web applications 和實例，可以幫助你了解如何構建完整的工具，包括前端和後端。

第一課非常簡單。我們只想建立一個 fullstack 項目並添加一個 prototyping 工具，該工具可以讓我們輕鬆地獨立構建 components。

我使用 Svelte 因為它的語法最簡單。如果你不知道 Svelte 或更喜歡不同的框架，別擔心。大部分的代碼就是 TypeScript 和 HTML。

提示： 如果你的框架很簡單，那麼它允許你寫複雜的功能。如果你的框架太複雜，那麼你將只剩下精力來寫簡單的功能。

我們開始吧！首先創建新的 SvelteKit 項目。 SvelteKit 是一個 fullstack 框架，類似於 Next.js 或 Nuxt。跑到以下命令：

npm create svelte@latest language-tutor

選擇 "Skeleton project"
選擇 TypeScript
選擇所有四個選項

create-svelte

然後跑到以下命令：

cd language-tutor
npm install
npm run dev -- --open

由於流式 AI 接口的構建和測試很複雜，因此我們需要確保有一種方法可以幫助我們輕鬆地構建 components。添加一個我構建的文檔和 prototyping 工具，名為 Kitbook。安裝它：

npm i -D kitbook@alpha

在 vite.config.ts 中的 sveltekit() 插件之前添加 kitbook() Vite 插件：

import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import { kitbook } from 'kitbook/plugins/vite'

export default defineConfig({
  plugins: [
    kitbook(),
    sveltekit(),
  ],
})

在 svelte.config.js 中添加 MDSvex imports 和配置：

import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex, MDSVEX_EXTENSIONS, KITBOOK_MDSVEX_CONFIG } from 'kitbook/plugins/vite';

const config = {
  extensions: ['.svelte', ...MDSVEX_EXTENSIONS],
	preprocess: [
    mdsvex(KITBOOK_MDSVEX_CONFIG),
    vitePreprocess(),
  ],
	// ...
};

export default config;

再次跑到 npm run dev，你會看到一個新的 src/routes/kitbook 文件夾。現在，當你去 /kitbook 時，你會進入 Kitbook 工作區。你可以使用它來單獨構建和測試 components。

Kitbook 還沒準備好了，並且仍會有更多重大更改，因此我不建議你使用它（未來可以）。 Storybook 和 Histoire 是兩個眾所周知的可用於生產的替代方案。我不使用它們，因為它們太大、太慢，並且不提供我最常使用的功能。但它們在許多框架中都可用並得到良好支持。

如果在自己的電腦運行這些命令，那就太好了！但是，如果你是 web development 新手，或者只是想閱讀和觀察，你也可以去我的線上遊樂場: Polylingual.dev/zh-TW/learn。在那邊可以查看結果，包括一些用於演示目的的附加 components. 你還可以找到英文版本，以及用於留下反饋的評論框。

明天，我們將討論持續部署 (CD) 到 Vercel 以及如何從一開始就使用 Lighthouse 查看我們的網站的性能。